<template>
  <div class="box">
      <header class="header">
          <ul>
            <li>
              <router-link to="/kindIndex" tag="div" class="left">
              <van-icon name="wap-nav" size="18"/>
            </router-link>
            </li>
            <li>
              <router-link to="/search" tag="div" class="search">
                <div class="search" >
                  <span></span>
                  <span>
                    <span><van-icon class="search_1" name="search" size="22"/></span>
                    笔记本
                  </span>
                </div>
              </router-link>
            </li>
           <router-link tag="li" to="/userIndex" v-if="isLogin">我的</router-link>
           <router-link tag="li" to="/login" v-else>登录</router-link>
          </ul>
        </header>
        <div class="content" ref="content">
          <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <!-- 轮播图 -->
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="item of bannerList" :key="item.bannerid">
              <van-image id="home_imge"
                :src="item.img"
              />
            </van-swipe-item>
          </van-swipe>
          <!-- nav 导航 -->
          <van-grid column-num="5" :border="false">
            <van-grid-item v-for="item of navList" :key="item.navid" :icon="item.imgurl" :text="item.title" />
          </van-grid>
          <!-- 商品秒杀 -->
          <div class="seckillBox">
            <div class="title_wrap">
              <div class="title_wrap_title">嗨购秒杀</div>
              <div class="title_wrap_timer">
                <div class="title_wrap_timer_sec">
                  {{ hour }}
                </div>
                <div class="timeCountDown">
                  <van-count-down :time="time">
                    <template #default="timeData">
                      <span class="block">{{ timeData.hours }}</span>
                      <span class="colon">:</span>
                      <span class="block">{{ timeData.minutes }}</span>
                      <span class="colon">:</span>
                      <span class="block">{{ timeData.seconds }}</span>
                    </template>
                  </van-count-down>
                </div>
              </div>
              <div class="seckillMore">更多秒杀<van-icon size="14" name="clock" /></div>
            </div>
            <ul class="seckillList">
              <li class="seckillItem" v-for="item of seckillList" :key="item.proid" @click="toDetail(item.proid)">
                <van-image :src="item.img1" />
                <p class="price">¥{{ (item.originprice * item.discount / 10).toFixed(0) }}</p>
                <p class="delPrice"><del>¥{{ item.originprice }}</del></p>
              </li>
            </ul>
          </div>
          <!-- 商品列表 -->
          <van-list
            :immediate-check="false"
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            >
            <ProList :list="proList"></ProList>
          </van-list>
          <div class="backTop" v-if="flag" @click="backTop">
            <van-icon name="down" size="30"/>
          </div>
        </van-pull-refresh>
        </div>
   </div>
</template>

<script>
import Vue from 'vue'
import { Swipe, SwipeItem, NavBar, Grid, GridItem, List, Cell, PullRefresh, Image as VanImage, CountDown, Search, Icon, Tag, Toast } from 'vant'
import { getBannerList, getProList, getSeckillList } from '@/api/home'
import ProList from '@/components/proList'
import { mapState } from 'vuex'

Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(Grid)
Vue.use(GridItem)
Vue.use(NavBar)
Vue.use(PullRefresh)
Vue.use(List)
Vue.use(Cell)
Vue.use(VanImage)
Vue.use(CountDown)
Vue.use(Search)
Vue.use(Icon)
Vue.use(Tag)
Vue.use(Toast)
export default {
  name: 'homeIndex',
  computed: {
    ...mapState({
      isLogin: ({ user: { isLogin } }) => isLogin
    })
  },
  components: {
    ProList
  },
  data () {
    return {
      flag: false,
      bannerList: [],
      proList: [],
      list: [],
      count: 2,
      navList: [
        { navid: 1, title: '嗨购超市', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/125678/35/5947/4868/5efbf28cEbf04a25a/e2bcc411170524f0.png' },
        { navid: 2, title: '数码电器', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png!q70.jpg' },
        { navid: 3, title: '嗨购服饰', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/41867/2/15966/7116/60ec0e0dE9f50d596/758babcb4f911bf4.png!q70.jpg' },
        { navid: 4, title: '嗨购生鲜', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png!q70.jpg.dpg' },
        { navid: 5, title: '嗨购到家', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png!q70.jpg.dpg' },
        { navid: 6, title: '充值缴费', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/185733/21/13527/6648/60ec0f31E0fea3e0a/d86d463521140bb6.png!q70.jpg.dpg' },
        { navid: 7, title: '9.9元拼', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/36069/14/16068/6465/60ec0f67E155f9488/595ff3e606a53f02.png!q70.jpg.dpg' },
        { navid: 8, title: '领券', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/186080/16/13681/8175/60ec0fcdE032af6cf/c5acd2f8454c40e1.png!q70.jpg.dpg' },
        { navid: 9, title: '领金贴', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/196711/35/12751/6996/60ec1000E21b5bab4/38077313cb9eac4b.png!q70.jpg.dpg' },
        { navid: 10, title: 'plus会员', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/37709/6/15279/6118/60ec1046E4b5592c6/a7d6b66354efb141.png!q70.jpg.dpg' }
      ],
      loading: false,
      finished: false,
      refreshing: false,
      isLoading: false,
      seckillList: [],
      hour: 0,
      time: 102 * 1000,
      scrollTop: ''
    }
  },
  // activated()和deactivated()只有在<keep-alive></keep-alive>包裹的时候才有效
  activated () {
    // 在vue对象存活的情况下，进入当前存在activated()函数的页面时，一进入页面就触发
    // 可用于初始化页面数据、keepalive缓存组件后
    this.$refs.content.scrollTop = localStorage.getItem('top') || 0
    localStorage.removeItem('top')
  },
  deactivated () {
    // 离开组件时执行
    localStorage.setItem('top', this.scrollTop)
  },
  async mounted () {
    // 轮播图数据
    var res = await getBannerList()
    this.bannerList = res.data.data
    // 商品列表
    var proList = await getProList()
    this.proList = proList.data.data
    // 秒杀列表
    var seckillList = await getSeckillList()
    this.seckillList = seckillList.data.data
    // 给content添加滚动的事件
    this.$refs.content.addEventListener('scroll', () => {
      this.scrollTop = this.$refs.content.scrollTop
      this.flag = this.$refs.content.scrollTop > 100
    })
    // 秒杀时间倒计时
    const date = new Date()
    this.hour = date.getHours()
    this.time = ((60 - date.getMinutes()) * 60 - date.getSeconds()) * 1000
  },
  methods: {
    // 滚动上拉时状态和数据的改变
    onLoad () {
      this.loading = true
      getProList({ count: this.count }).then(res => {
        this.loading = false
        if (res.data.data.length === 0) {
          this.finished = true
        } else {
          this.proList = [...this.proList, ...res.data.data]
          this.count++
        }
      })
    },
    // 下拉刷新数据
    onRefresh () {
      this.isLoading = true
      getProList().then(res => {
        this.isLoading = false
        this.proList = res.data.data
        this.count = 2
        this.finished = false
      })
    },
    // 返回顶部
    backTop () {
      this.$refs.content.scrollTop = 0
    },
    // 登录事件
    onClickRight () {
      this.$router.push({ path: 'login' })
    },
    // 跳转详情
    toDetail (proid) {
      this.$router.push({ name: 'detail', params: { proid } })
    }
  }
}
</script>

<style lang="stylus" scoped>
.backTop
  position fixed
  bottom 110px
  right 10px
  width 36px
  height 36px
  border 1px solid #efefef
  background-color #efefef
  border-radius 50%
  transform rotate(180deg)
  display flex
  justify-content center
  align-items center
  color #666
.seckillBox
  width 94%
  margin 10px 3%
  background-color #ffffff
  height 1.6rem
  border-radius 15px
  .title_wrap
    height 0.4rem
    background url('') no-repeat
    background-size contain
    .title_wrap_title
      float: left;
      display: inline-block;
      height: 0.3rem;
      margin-top: 0.05rem;
      margin-right: 0.1rem;
      margin-left: 0.15rem;
      font-family: "微软雅黑";
      font-size: .16rem;
      color: #333;
      letter-spacing: 0;
      line-height: 0.3rem;
      font-weight bold
    .title_wrap_timer
      float left
      display inline-block
      vertical-align middle
      line-height 0.4rem
      height 0.4rem
      .title_wrap_timer_sec
        height: 100%;
        border-radius: 5px;
        font-size: 0.14rem;
        color: #ff2727;
        letter-spacing: 0;
        float: left;
        position: relative;
        left: -1px;
        line-height: 0.4rem;
        &:after
          height: 0.2rem;
          width: 0.2rem;
          content: "";
          display: inline-block;
          vertical-align: middle;
          background-image: url(//wq.360buyimg.com/wxsq_project/portal/m_jd_index/images/seckill-time-to_1de70c91.png);
          background-repeat: no-repeat;
          background-size: contain;
      .timeCountDown
        float left
        padding-top 0.1rem
        width 1rem
        transform scale(0.8)
    .seckillMore
      float right
      color #f66
      line-height 0.4rem
      padding-right 0.2rem
      font-size 0.12rem
      .van-icon-clock
        transform rotate(-135deg)
        margin 0.02rem
.seckillList
  display flex
  .seckillItem
    // flex 1
    width: 80px
    display flex
    justify-content center
    align-items center
    flex-direction column
    .van-image
      width 80%
      height 50px
      margin 0 auto
      display block
    .price
      color #f66
      text-align center
    .delPrice
      color #666
      text-align center
.colon {
    display: inline-block;
    margin: 0 4px;
    color: #ee0a24;
  }
  .block {
    display: inline-block;
    width: 22px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: #ee0a24;
  }
.van-swipe
  height 200px
  .van-swipe-item
    height 100%
    .van-image
      height 200px
      img
        height 100%
.box
  .header
    ul
      display flex
      height 100%
      li
        height 100%
        width 50px
        display flex
        justify-content center
        align-items center
        color #fff
        &:nth-child(2)
          flex 1
        .search
          width 100%
          height 65%
          border-radius 30px
          background-color #fff
          span
            display inline-block
            color #666
            margin-right 10px
            vertical-align middle
            .search_1
              margin-left: 10px
              margin-top 5px

.van-search
  padding 5px 12px
.van-search__content
  margin-left 12px

.van-search
  padding 5px 12px
.van-search__content
  margin-left 12px
.recentSearch
.hotSearch
 .van-tag
  display: inline-block
  line-height: 20px
  text-align: center
  width 40px
  height 20px
  padding 5px
  margin: 5px
  color #333

</style>
